

document.ready(function () {


    /**
     * 0. 获取元素
     */
    let int = document.querySelectorAll('.int'); //输入框
  
    let delBtn = document.querySelectorAll('.del-btn')//删除按钮
  
    let reBoxSpan = document.querySelectorAll('.re-box span')//错误提示
  
    let isAgree = document.querySelector('.isAgree') //同意按钮
  
    let btn = document.querySelector('.btn') //注册按钮
  
    /**
     * 1.需求:当聚焦(focus)到int,给当前int添加边框线
     * 2.需求:输入事件:判断当前输入值的长度-如果大于0:显示删除按钮del-btn,否则就隐藏
     */
    int.forEach(function (dom, i) {
      //聚焦
      dom.addEventListener('focus', function () {
        this.style.borderColor = '#00bdff'
      })
  
      //输入事件
      dom.addEventListener('input', function () {
        if (this.value.length > 0) {
          delBtn[i].style.display = 'block'
        } else {
          delBtn[i].style.display = 'none'
        };
      })
  
    })
  
  
    /**
     * 3.需求: 点击删除按钮(delBtn),清空当前输入的数据
     */
    delBtn.forEach(function (dom, i) {
      dom.addEventListener('click', function () {
        int[i].value = '';
        this.style.display = 'none'// 隐藏自己
        reBoxSpan[i].style.display = 'none'
      })
    })
  
    /**
     * 4.需求: 定义好正则表达式(验证规则)
     */
    let reg = [
      /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/,//账号 //6-12位字母开头,后面跟数字字母
      /^1[345678][0-9]{9}$/, //手机号
      /^[a-zA-Z][a-zA-Z0-9_]{3}$/,//4位字母开头,后面跟数字字母
      /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/ //密码
    ]
  
    /**
     * 5.需求: 失去焦点, 验证输入信息的合法性, 如果不合法: 显示错误提示信息, 否则:就隐藏
     */
    int.forEach(function (dom, i) {
      dom.addEventListener('blur', function () {
  
        //修改int的边框颜色
        this.style.borderColor = '#ccc'
  
        //let bool = 正则.test(输入的值)
        let bool = reg[i].test(this.value);
  
        //判断
        if (bool) {
          //真:隐藏
          reBoxSpan[i].style.display = 'none'
        } else {
          //假: 显示
          reBoxSpan[i].style.display = 'block'
        }
  
      })
    })
  
    /**
     * 6.需求: 点击isAgree按钮, 将btn改变背景色, 并取消禁用
     */
    isAgree.addEventListener('change', function () {
      //获取当前isAgree按钮的选中状态
      let bool = this.checked;
  
      if (bool) {
        btn.style.background = '#00bdff'
        btn.style.color = '#fff'
        btn.disabled = false //并取消禁用
      } else {
        btn.style.background = ''
        btn.style.color = ''
        btn.disabled = true //禁用
      }
  
    })
  
    /**
     * 7.需求: 点击立即注册,验证输入信息合法性
     */
    btn.addEventListener('click', function () {
  
      for(let i=0; i<int.length; i++){
  
        //let bool = 正则.test(输入的值)
        let bool = reg[i].test(int[i].value);
  
        //判断
        if (bool) {
          //真:隐藏
          reBoxSpan[i].style.display = 'none'
  
        } else {
          //假: 显示
          reBoxSpan[i].style.display = 'block'
          return //结束函数
        }
      }
  
      //就跳转
      location.href = './home.html'
  
    })
  
  })